<html>
    <head>
        <title>事件修饰符</title>
    </head>
    <body>
        <script>
             // ★四、事件修饰符
                                        /*
                                            在事件处理程序中调用 event.preventDefault() 或者 event.stopPropagation() 是非常常见的需求。
                                            尽管我们可以在方法中轻松实现这点，但是更好的方式是： 方法只有纯粹的数据逻辑，而不是去处理DOM事件的细节。

                                            为了结局这个问题，Vue.js 为v-on 提供了"事件修饰符" .
                                            之前提过，修饰符是由点开头的指令后缀来表示的。

                                                     .stop
                                                     .prevent
                                                     .capture
                                                     .self
                                                     .once
                                                     .passive
                                        */

                                        /*
                                              详解：
                                                    
                                                   .stop
                                                   阻止事件继续冒泡(传播)
                                                   <a v-on:click.stop="doThis"></a>

                                                   .prevent
                                                   提交页面不在重载页面(阻止DOM事件的默认行为)
                                                   <form v-on:submit.prevent="onSubmit"></form>

                                                   串联
                                                   修饰符可以串联
                                                   <a v-on:click.stop.prevent="doThat"></a>


                                                   只有修饰符
                                                   <form v-on:submit.prevent></form>

                                                   事件捕获(所谓捕获，就是将事件据为己有,自己先处理，然后才交给内部元素进行处理)
                                                   添加事件监听器时使用事件捕获模式
                                                   即内部元素触发的事件现在此处理，然后才交由内部元素进行处理
                                                   <div v-on:click.capture="doThis">...</div>

                                                   .self
                                                   只有在event.target是当前元素自身时触发处理器函数
                                                   即事件不是从内部元素触发的
                                                   <div v-on:click.self="doThat">...</div>


                                                   事件只会被触发一次
                                                   <a v-on:click.once="doThis"></a>
                                        */

                                        /*
                                              注意：  
                                                   使用事件修饰符时，顺序很重要；
                                                   相应的代码会以同样的顺序产生作用。

                                                   因此,用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击
                                        */

                                        /*
                                                .once
                                                   事件只会被触发一次
                                                   <a v-on:click.once="doThis"></a>

                                                   不像其他只能对原生DOM事件起作用的修饰符， .once 修饰符还能被用到自定义的 "组件事件上"。
                                                    (如果你还没有阅读关于组件的文档，现在大可不必担心)
                                        */

                                        /*
                                                .passive

                                                    Vue 还对应 addEventLister 中的 passive 选项提供了 .passive 修饰符

                                                    --滚动事件的默认行为(即滚动行为)将里立即触发 --
                                                    --而不会等待 'onScroll'完成
                                                    --这其中包含 'event.preventDefault()'的情况

                                                    <div v-on:scroll.passive="onScroll">...</div>

                                                    这个.passive 修饰符尤其能够提升移动端的性能。


                                                注意： 不要把 .passive 和 .prevent 一起使用，因为　.prevent 将会被忽略，同时浏览器会向你展示一个警告。

                                                      请记住， .passive 会告诉浏览器你不想阻止事件的默认行为
                                        */
        </script>
    </body>
</html>